<template>
	<vCommonPage :type="1" :title="$route.query.name" class="zyczXz">
		<div slot="customContent" style="width:100%; overflow: hidden;" v-if="!zzjdShow">
			<!-- 手动输入就诊号  身份证-->
			<writeInpatientNumberBox ref="writeInp" :writeInpatientNumberBoxShow="writeInpatientNumberBoxShow" @ReadedIdInfo="ReadedIdInfo"
				@openInpBox="openInpBox" @closeInpBox="closeInpBox"></writeInpatientNumberBox>
			<div class="title" v-if="cardChouseList">
				请选择输入方式
			</div>
			<div class="title" v-if="!cardChouseList">
				此功能没有配置刷卡方式,请联系管理员。
			</div>
			<div v-if="cardChouseList" class="centerFlex">
				<div class="conentBox" v-if="cardChouseList.length<=4">
					<div class="conentBoxItem" v-for="(item,index) in cardChouseList" @click="gotoChcekIdCard(item)"
						:key="'o'+index">
						<div style="width: 100%;">
							<img :src="item.url" class="conentBoxItemImg" />
							<div class="conentBoxItemName">{{item.name}}</div>
						</div>

					</div>
				</div>
				<!-- 				<div class="zyczConentBox" v-if="$route.query.pageName=='yjjcz'">
				  <el-carousel :interval="4000" type="card" height="470px" width="100%">
				    <el-carousel-item class="swiper-slide" v-for="(item,index) in cardChouseList"   @click="gotoChcekIdCard(item)">
				     <img :src="item.url" class="zyczConentBoxItemImg" />
				     <div class="zyczConentBoxItemName">{{item.name}}</div>
				    </el-carousel-item>
				  </el-carousel>
				</div> -->

				<div class="zyczConentBox" v-else>
					<div class="swiper-slide" v-for="(item,index) in cardChouseList" @click="gotoChcekIdCard(item) "
						:key="'o'+index">
						<img :src="item.url" class="zyczConentBoxItemImg" />
						<div class="zyczConentBoxItemName">{{item.name}}</div>
					</div>
				</div>
			</div>
			<div class="bottomBox marl">
				<el-button type="primary" class="BtnTextHome" @click="goBackHome()">首页</el-button>
			</div>
		</div>
		<div slot="customContent" style="width:100%; overflow: hidden;" v-if="zzjdShow">
			<zzjd   @gotoNextPage='gotoNextPage'></zzjd>
		</div>
	</vCommonPage>
</template>
<script>
	import Swiper from 'swiper'
	import 'swiper/css/swiper.css';
	import writeInpatientNumberBox from './writeInpatientNumberBox';
	import {
		getUserInfo,
		putUserInfo,
		getInpatientUnRecordList
	} from "@api/apiBox/user"
	import {
		MessageBox
	} from "element-ui";
	import zzjd from './zzjd.vue'

	export default {
		name: "mzgh",
		data() {
			return {
				cardChouseList: [],
				mySwiper: '',
				writeInpatientNumberBoxShow: false ,//输入住院号弹窗
				zzjdShow: false
			};
		},
		methods: {
			ReckonTime() {},
			//前往示例插卡
			async gotoChcekIdCard(item) {
				// let data = {
				// 	data: {
				// 		idNo: '350681199704210519',
				// 		phone: '18060906026',
				// 		patientName:'江旭毅'
				// 	},
				// 	that: this
				// }
				// const res = await putUserInfo(data);
				//存入刷卡信息
				this.$store.dispatch("appointment/updatecard", item); // 卡片信息
				console.log('item', item)
				if (item.num == 'srmzh' || item.num == 'srzyh' || item.num == 'srsfz' || item.num == 'srhzdh') {
					this.openInpBox(item.num);
					return;
				}
				this.$router.push({
					name: "readcard",
					query: {
						cardName: item.name,
						title: this.$route.query.name,
						nextPage: this.$route.query.pageName,
						code: item.num
					},
				})
			},
			//门诊预约数据初始化
			async initData() {

			},
			closeInpBox() {
				this.writeInpatientNumberBoxShow = false;
			},
			openInpBox(num) {
				this.$refs.writeInp.writeInpShow(num);
				this.writeInpatientNumberBoxShow = true;
			},
			//身份证读卡回调
			async ReadedIdInfo() {
				this.writeInpatientNumberBoxShow = false;
				let code = this.$store.state.user.userIdCardInfo.ID;
				let data = {
					data: {
						code: code, //身份证号/有效的证件证号
						codeType: 'sfz', //身份证类型
						hospitalId: this.$store.state.terminfo.hospId
					},
					that: this
				}
				const res = await getUserInfo(data);
				console.log(res.data, '---')
				this.$store.dispatch("appointment/updatecardNo", code);
				if (res.data) {
					//将用户信息存入
					this.$store.dispatch("user/updateuserinfo", res.data);
					if (this.$route.query.nextPage == 'yjjcz') {
						//通过patintId去查询住院号
						let formData = {
							data: {
								patientId: this.$store.state.user.userinfo.patientId, //患者ID
							},
							that: this
						}
						const zyInfo = await getInpatientUnRecordList(formData);
						if (zyInfo.data.length > 0) {
							let inPatientId = zyInfo.data[0].inPatientId;
							//通过住院ID去查询患者身份信息
							let inNewData = {
								data: {
									code: inPatientId,
									codeType: "zyh",
									hospitalId: this.$store.state.terminfo.hospId
								},
								that: this
							}
							const res = await getUserInfo(inNewData);
							if (!res.data) {
								context.$alert('', '查无数据！', {})
								let _this = this;
								setTimeout(() => {
									_this.tipText = '';
								}, 1000)
							} else {
								this.$store.dispatch("user/updateuserinfo", res.data);
								//前往下一个页面
								this.gotoNextPage();
							}
						} else {
							context.$alert('', '该身份证无住院信息！', {})
						}
						console.log('zyInfo', zyInfo.data)
					} else {

						this.gotoNextPage();
					}
				} else {
					// if(this.$store.state.appointment.card.num == 'srsfz'){
					// 	let _this = this;
					// 	MessageBox.alert('您没有建档，请到窗口进行建档。', {
					// 		confirmButtonText: "确定",
					// 		callback: action => {
					// 			_this.$router.push('/');
					// 		}
					// 	});
					// }else{
					// 	//前往自助建档
					// 	this.zzjdShow = true;
					// }
					
					//手动输入身份证 如果没建档则 前往建档
					let _this = this;
					MessageBox.alert('您没有建档，请到窗口进行建档。', {
						confirmButtonText: "确定",
						callback: action => {
							_this.$router.push('/');
						}
					});
				}
			},
			//前往下一个页面
			gotoNextPage() {
				if (this.$route.query.pageName == 'mzgh') {
					//今天日期
					let toDay = this.$getTime.changeChineToDate(new Date(), 'YYYY-MM-DD');
					//将日期存缓存中
					this.$store.dispatch("appointment/updateDate", toDay); //预约日期
					this.$router.push({
						name: 'mzyy',
						query: {
							code: 'mzgh'
						}
					})
				} else {
					this.$router.push({
						name: this.$route.query.pageName,
						query: {
							code: this.$route.query.pageName
						}
					})
				}
			}
		},
		computed: {},
		components: {
			writeInpatientNumberBox,
			zzjd
		},
		mounted() {},
		created() {
			for (let item of this.$store.state.terminfo.funcinfo) {
				if (item.num == this.$route.query.pageName) {
					//存储刷卡类型数据
					this.$store.dispatch("terminfo/updatecardConfs", item.kyklx); // 卡片信息
					//存储支付类型数据
					this.$store.dispatch("terminfo/updatepayConfs", item.zffs); // 支付信息
				}
			}
			this.cardChouseList = this.$store.state.terminfo.cardConfs;
			console.log(this.cardChouseList, '刷卡类型')
		}
	};
</script>
<style scoped rel="stylesheet/scss" lang="scss">
	@import "@/assets/css/xzskfs.scss";
	@import "@/assets/css/zyczXzskfs.scss";

	.centerFlex {
		display: flex;
		justify-content: center;
	}
</style>
<style>
	.zyczXz .el-main {
		padding: 10px 70px !important;
		-webkit-overflow-scrolling: touch;
	}

	.zyczXz ::-webkit-scrollbar {
		margin-top: 8px;
		/*滚动条整体样式*/
		width: 1px;
		/*高宽分别对应横竖滚动条的尺寸*/
		height: 4px;
	}

	.zyczXz ::-webkit-scrollbar-thumb {
		/*滚动条里面小方块*/
		border-radius: 10px;
		box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
		height: 10px;
		border-radius: 4px;
		background: #57A8FF;
	}

	.zyczXz ::-webkit-scrollbar-track {
		/*滚动条里面轨道*/
		box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
		border-radius: 10px;
		background: #ededed;
	}
	.zzjd{
		z-index: 5;
		position: fixed;
		bottom: 20%;
	}
</style>
